<template>
  <footer class="site-footer">
    <!-- Main Footer Content -->
    <div class="footer-main">
      <div class="container">
        <div class="footer-grid">
          <!-- Company Info -->
          <div class="footer-section">
            <div class="footer-logo">
              <img src="@/assets/logo.png" class="logo-icon" width="32px" height="32px"/>
              <span class="logo-text">AI智聘通</span>
            </div>
            <p class="footer-description">
              基于人工智能技术的职业发展平台，为用户提供智能简历优化、面试训练和职业规划服务。
            </p>
            <div class="social-links">
              <a href="#" class="social-link" aria-label="微信">
                <MessageCircle size="20"/>
              </a>
              <a href="#" class="social-link" aria-label="GitHub">
                <Github size="20"/>
              </a>
              <a href="#" class="social-link" aria-label="邮箱">
                <Mail size="20"/>
              </a>
            </div>
          </div>

          <!-- Quick Links -->
          <!--          <div class="footer-section">-->
          <!--            <h3 class="footer-title">快速链接</h3>-->
          <!--            <ul class="footer-links">-->
          <!--              <li><a href="#" class="footer-link">产品介绍</a></li>-->
          <!--              <li><a href="#" class="footer-link">功能特色</a></li>-->
          <!--              <li><a href="#" class="footer-link">价格方案</a></li>-->
          <!--              <li><a href="#" class="footer-link">帮助中心</a></li>-->
          <!--              <li><a href="#" class="footer-link">API文档</a></li>-->
          <!--            </ul>-->
          <!--          </div>-->

          <!-- Services -->
          <div class="footer-section">
            <h3 class="footer-title">核心服务</h3>
            <ul class="footer-links">
              <li><a href="/resume_create" class="footer-link">AI 简历生成</a></li>
              <li><a href="/resume" class="footer-link">海量简历模板</a></li>
              <li><a href="/optimize" class="footer-link">简历优化指南</a></li>
              <li><a href="/interview" class="footer-link">虚拟面试战场</a></li>
              <li><a href="/diagnosis" class="footer-link">面试诊疗中心</a></li>
            </ul>
          </div>

          <!-- Contact & Support -->
          <div class="footer-section">
            <h3 class="footer-title">联系我们</h3>
            <div class="contact-info">
              <div class="contact-item">
                <Mail size="16" class="contact-icon"/>
                <span>monsterai@qq.com</span>
              </div>
              <div class="contact-item">
                <MapPin size="16" class="contact-icon"/>
                <span>北京市海淀区北京航空航天大学</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Open Source Acknowledgments -->
    <div class="footer-acknowledgments">
      <div class="container">
        <div class="acknowledgments-content">
          <h4 class="acknowledgments-title">
            <Heart class="heart-icon" size="16"/>
            致谢开源项目
          </h4>
          <div class="open-source-grid">
            <div class="open-source-item" v-for="project in openSourceProjects" :key="project.name"
                 @click="project.click">
              <component :is="project.icon" size="20" class="project-icon"/>
              <div class="project-info">
                <span class="project-name">{{ project.name }}</span>
                <span class="project-version">{{ project.version }}</span>
              </div>
              <a :href="project.url" target="_blank" class="project-link" :aria-label="`访问 ${project.name}`">
                <ExternalLink size="14"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="footer-bottom">
      <div class="container">
        <div class="bottom-content">
          <div class="legal-links">
            <div v-for="(item, index) in services">
              <span @click="item.click()" class="legal-link">{{ item.name }}</span>
              <span class="separator" v-if="index !== services.length-1">|</span>
            </div>
          </div>

          <div class="copyright-info">
            <div class="copyright-text">
              <span>Copyright © {{ currentYear }} AI智聘通  All Rights Reserved.</span>
            </div>
            <div class="icp-info">
              <Shield size="14" class="icp-icon"/>
              <a href="https://beian.miit.gov.cn/" target="_blank" class="icp-link">
                {{ ICP_Num }}
              </a>
            </div>
          </div>

          <div class="footer-meta">
            <div class="build-info">
              <Code size="14" class="build-icon"/>
              <span>Build {{ buildVersion }}</span>
            </div>
            <div class="update-time">
              <Calendar size="14" class="calendar-icon"/>
              <span>更新于 {{ lastUpdated }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Scroll to Top Button -->
    <button
        v-show="showScrollTop"
        @click="scrollToTop"
        class="scroll-top-btn"
        aria-label="回到顶部"
    >
      <ChevronUp size="20"/>
    </button>
    <el-dialog
        v-model="AiHobbyistDialog"
        title="AI-Hobbyist"
        width="500"
        style="border-radius: 10px"
        center
    >
      <el-divider>GPT-SoVITs作者</el-divider>
      <div style="text-align: center">
        <a class="legal-link-bili" target="__blank" href="https://space.bilibili.com/5760446"> 花儿不哭</a>
      </div>
      <el-divider>TTS模型训练</el-divider>
      <div style="text-align: center">
        <a class="legal-link-bili" target="__blank" href="https://space.bilibili.com/6589795"> 红血球AE3803</a>
      </div>
      <div style="text-align: center">
        <a class="legal-link-bili" target="__blank" href="https://space.bilibili.com/518098961"> 白菜工厂1145号员工</a>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="AiHobbyistDialog = false">
            我已知晓
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="serviceDialog"
        width="500"
        center
        class="custom-dialog"
        :title="serviceTitle"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <div style="width: 100%; min-height: 200px; overflow-y: auto;">
        {{ serviceContent }}
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" plain @click="cancel">
            我拒绝
          </el-button>
          <el-button type="primary" @click="serviceDialog = false">
            我已知晓
          </el-button>
        </div>
      </template>
    </el-dialog>
  </footer>

</template>

<script setup>
import {ref, onMounted, onUnmounted, computed} from 'vue'
import {
  Brain, MessageCircle, Hash, Github, Mail, Phone, MapPin, Clock,
  Heart, ExternalLink, Shield, ShieldCheck, Code, Calendar,
  ChevronUp, Cat
} from 'lucide-vue-next'
import {getDisclaimer, getPrivacyPolicy, getServiceTerm, getUserAgreement} from "@/assets/ts/service";
import appStore from "@/store";
import {ElMessageBox} from "element-plus";

// Reactive data
const showScrollTop = ref(false)
const AiHobbyistDialog = ref(false)
const currentYear = computed(() => new Date().getFullYear())
const buildVersion = ref('v1.0.0')
const lastUpdated = ref('2025-06-09')

const ICP_Num = ref("京ICP备2025129281号-1")
const police_Num = ref('')
const serviceDialog = ref(false)
const serviceContent = ref('')
const serviceTitle = ref('')
const privacyPolicy = () => {
  serviceContent.value = getPrivacyPolicy()
  serviceTitle.value = "隐私政策"
  serviceDialog.value = true;
}

const router = useRouter()

const { clearUserInfo } = appStore.useUserInfoStore;
const { saveToken } = appStore.useTokenStore;

const cancel = () => {
  router.push({
    path: '/'
  })
  ElMessage.success('已退出登录')
  setTimeout(() => {
    clearUserInfo();
    saveToken(''); // 清除token
  },250)
  serviceDialog.value = false;

}

const serviceTerm = () => {
  serviceContent.value = getServiceTerm()
  serviceTitle.value = "服务条款"
  serviceDialog.value = true;

}

const userAgreement = () => {
  serviceContent.value = getUserAgreement()
  serviceTitle.value = "用户协议"
  serviceDialog.value = true;

}

const disclaimer = () => {
  serviceContent.value = getDisclaimer()
  serviceTitle.value = "免责申明"
  serviceDialog.value = true;

}

const services = [
  {
    name: '隐私政策',
    click: privacyPolicy
  },
  {
    name: '服务条款',
    click: serviceTerm
  },
  {
    name: '用户协议',
    click: userAgreement
  },
  {
    name: '免责声明',
    click: disclaimer
  }

]

const maobucvClick = () => {
  ElMessageBox({
    title: '猫步简历',
    message:
        h('p', null, [
          h("a", {
            class: 'message-box-link',
            href: 'https://maobucv.com',
            target: '__blank'
          }, '猫步简历官网'),
          h("div", {}, ''),
          h("a", {
            class: 'message-box-link',
            href: 'https://github.com/Hacker233/resume-design',
            target: '__blank'
          }, '猫步简历开源仓库'),
        ]),
    confirmButtonText: '我已知晓'
  }).catch(() => {
  })
}

const AiHobbyistClick = () => {
  AiHobbyistDialog.value = true;
}

const defaultClick = () => {
}
// Open source projects data
const openSourceProjects = ref([
  {
    name: '猫步简历',
    icon: Cat, // Using div as placeholder, you can replace with actual Vue icon
    url: 'https://maobucv.com',
    click: maobucvClick
  },
  {
    name: 'GPT-SoVITs',
    icon: 'div',
    url: 'https://github.com/RVC-Boss/GPT-SoVITS',
    click: defaultClick
  },
  {
    name: 'AI-Hobbyist',
    icon: Heart,
    url: 'https://gsv.acgnai.top/',
    click: AiHobbyistClick
  },
])

// Scroll handling
const handleScroll = () => {
  showScrollTop.value = window.scrollY > 500
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>
<style>
.message-box-link {
  color: #a3a3a3;
  text-decoration: none;
  transition: color 0.3s ease;
  margin-left: 40px;
  cursor: pointer;
}

.message-box-link:hover {
  color: #9333ea;
}
</style>
<style scoped lang="scss">
.site-footer {
  background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%);
  color: #f5f5f5;
  position: relative;
  margin-top: auto;
}

.dialog-para {
  text-align: center;
  color: #9333ea;
  line-height: 1.5em;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Main Footer */
.footer-main {
  padding: 4rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.logo-icon {
  color: #9333ea;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #9333ea, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.footer-description {
  color: #a3a3a3;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #a3a3a3;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: rgba(147, 51, 234, 0.2);
  border-color: #9333ea;
  color: #9333ea;
  transform: translateY(-2px);
}

.footer-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #f5f5f5;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-link {
  color: #a3a3a3;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.footer-link:hover {
  color: #9333ea;
  transform: translateX(4px);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #a3a3a3;
}

.contact-icon {
  color: #9333ea;
  flex-shrink: 0;
}

/* Acknowledgments Section */
.footer-acknowledgments {
  padding: 2rem 0;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.acknowledgments-content {
  text-align: center;
}

.acknowledgments-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #f5f5f5;
}

.heart-icon {
  color: #ef4444;
  animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.open-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.open-source-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.open-source-item:hover {
  background: rgba(147, 51, 234, 0.1);
  border-color: rgba(147, 51, 234, 0.3);
  transform: translateY(-2px);
}

.project-icon {
  color: #9333ea;
  flex-shrink: 0;
}

.project-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.project-name {
  font-weight: 600;
  color: #f5f5f5;
  font-size: 0.875rem;
}

.project-version {
  font-size: 0.75rem;
  color: #a3a3a3;
}

.project-link {
  color: #a3a3a3;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.project-link:hover {
  color: #9333ea;
}

/* Bottom Bar */
.footer-bottom {
  padding: 1.5rem 0;
  background: rgba(0, 0, 0, 0.3);
}

.bottom-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  align-items: center;
  font-size: 0.875rem;
}


.legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.legal-link {
  color: #a3a3a3;
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
}

.legal-link-bili{
  color: #a3a3a3;
  text-align: center;
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
}

.legal-link-bili:hover{
  color: #9333ea;
}

.legal-link:hover {
  color: #9333ea;
}

.separator {
  color: #525252;
  margin: 0 0.75rem;
}

.copyright-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.copyright-text,
.icp-info,
.security-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #a3a3a3;
}

.icp-icon,
.security-icon {
  color: #9333ea;
}

.icp-link,
.security-link {
  color: #a3a3a3;
  text-decoration: none;
  transition: color 0.3s ease;
}

.icp-link:hover,
.security-link:hover {
  color: #9333ea;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: right;
}

.build-info,
.update-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  color: #a3a3a3;
  font-size: 0.75rem;
}

.build-icon,
.calendar-icon {
  color: #9333ea;
}

/* Scroll to Top Button */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #9333ea, #c084fc);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}

.scroll-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(147, 51, 234, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .bottom-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }

  .footer-meta {
    text-align: center;
  }

  .build-info,
  .update-time {
    justify-content: center;
  }

  .legal-links {
    justify-content: center;
  }

  .open-source-grid {
    grid-template-columns: 1fr;
  }

  .scroll-top-btn {
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  .footer-main {
    padding: 3rem 0 1.5rem;
  }

  .social-links {
    justify-content: center;
  }

  .legal-links {
    flex-direction: column;
    gap: 0.5rem;
  }

  .separator {
    display: none;
  }
}
</style>